<template>
  <view class="side-nav-filter">
    <view class="main">
      <view class="main-left">
        <scroll-view
          :scroll-y="true"
          class="scroll-left"
          :scroll-into-view="scrollIntoViewLeft"
        >
          <view
            class="filter-type"
            v-for="(item, index) in filterTypeList"
            :key="index"
            :class="typeActive == item.id ? 'filter-type-on' : ''"
            @tap="typeCheck(item)"
          >
            <view class="_type-content"
              ><text>{{ item.type }}</text></view
            ></view
          >
        </scroll-view>
      </view>
      <view class="main-right">
        <scroll-view
          :scroll-y="true"
          class="scroll-right"
          :scroll-into-view="scrollIntoViewRight"
          @scroll="scrollRight"
        >
          <view
            class="filter-content"
            v-for="(item, index) in filterTypeList"
            :key="index"
            :id="'c-' + index"
          >
            <view class="_content-title"
              ><text
                >{{ item.title }}
                <text v-if="item.titleTips" class="_title-tips">{{
                  item.titleTips
                }}</text></text
              ></view
            >
            <view class="_content-box">
              <view
                class="_box-item"
                v-if="item.isFirstChoice"
                :class="!isSelected(item, '') ? '_box-item-on' : ''"
                @tap="filterTypeChoose(item, '')"
                ><text>{{ item.firstChoice }}</text></view
              >
              <view
                class="_box-item"
                v-for="(it, idx) in item.list"
                :key="idx"
                :class="isSelected(item, it) ? '_box-item-on' : ''"
                @tap="filterTypeChoose(item, it)"
                ><text>{{ it }}</text></view
              >
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
  onMounted,
  getCurrentInstance,
  defineProps,
  computed,
  watch,
} from "vue";

const props = defineProps({
  filterTypeList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

onMounted(() => {
  getContentClassTopNum();
});

// 定义已选项
const filterTypeChooseArr = ref([]);

// 定义右侧内容区元素id名为数组
const contentIdArr = ref([]);

const isSelected = computed(() => {
  return (item, option) => {
    if (filterTypeChooseArr.value.length < 1) {
      return false;
    } else {
      for (let i = 0; i < filterTypeChooseArr.value.length; i++) {
        if (filterTypeChooseArr.value[i].id == item.id) {
          if (filterTypeChooseArr.value[i].list.length < 1) {
            return false;
          } else {
            if (!option) {
              return true;
            } else {
              if (filterTypeChooseArr.value[i].list.includes(option)) {
                return true;
              } else {
                return false;
              }
            }
          }
        }
      }
    }
  };
});
watch(
  () => props.filterTypeList,
  (newValue, oldValue) => {
    if (newValue) {
      // console.log("newValue", newValue);
      filterTypeChooseArr.value = [];
      contentIdArr.value = [];
      for (let i = 0; i < newValue.length; i++) {
        filterTypeChooseArr.value.push({
          id: newValue[i].id,
          type: newValue[i].type,
          title: newValue[i].title,
          list: newValue[i].chooseList,
        });
        contentIdArr.value.push({
          idName: "c-" + i,
          top: "",
        });
      }
    }
  },
  {
    immediate: true,
  }
);

// 左侧目标点
const scrollIntoViewLeft = ref("");
// 右侧目标点
const scrollIntoViewRight = ref("");

// 定义左侧选中变量
const typeActive = ref(1);

// 左侧筛选类型选择事件
function typeCheck(item) {
  typeActive.value = item.id;
  scrollIntoViewRight.value = contentIdArr.value[typeActive.value - 1].idName;
}

// 获取页面实例对象
const instance = getCurrentInstance();

function getContentClassTopNum() {
  const query = uni.createSelectorQuery().in(instance);
  contentIdArr.value.forEach((item) => {
    // console.log("item", item);
    query
      .select(`#${item.idName}`)
      .boundingClientRect((data) => {
        // console.log("得到布局位置信息", `${item.idName}`, data);
        contentIdArr.value.find((it) => {
          if (it.idName == item.idName) {
            it.top = data.top;
          }
        });
      })
      .exec();
  });
}

function scrollRight(e) {
  // console.log("e", e.detail.scrollTop);
  let scrollTop = e.detail.scrollTop;
  contentIdArr.value.forEach((item, index) => {
    if (
      scrollTop >= item.top &&
      contentIdArr.value[index + 1] &&
      scrollTop < contentIdArr.value[index + 1].top
    ) {
      typeActive.value = index + 1;
    } else if (scrollTop >= item.top) {
      typeActive.value = index + 1;
    }
  });
}

// 定义右侧选择事件
const emit = defineEmits(["filterTypeChooseEmit"]);
function filterTypeChoose(item, option) {
  filterTypeChooseArr.value.forEach((it) => {
    if (it.id == item.id) {
      if (!option) {
        it.list = [];
      } else {
        if (item.isRadio) {
          // 单选
          it.list = [];
          it.list.push(option);
        } else {
          // 多选
          let index = it.list.findIndex((ele) => ele == option);
          if (index > -1) {
            it.list.splice(index, 1);
          } else {
            it.list.push(option);
          }
        }
      }
    }
  });
  emit("filterTypeChooseEmit", filterTypeChooseArr.value);
}
</script>

<style lang="scss" scoped>
.side-nav-filter {
  width: 100%;
}

.main {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;

  .main-left {
    width: 190rpx;
    height: 100vh;
    border-right: 1px solid #ececec;
    overflow: hidden;

    .scroll-left {
      width: 100%;
      height: 100%;

      .filter-type {
        width: 100%;
        margin-top: 44rpx;
        margin-bottom: 18rpx;
        display: inline-block;

        ._type-content {
          font-weight: 400;
          font-size: 32rpx;
          color: #000000;
          border-left: 6rpx solid #ffffff;
          padding-left: 20rpx;

          display: inline-block;
          transition: all 0.3s;
        }
      }

      .filter-type-on {
        ._type-content {
          color: #1872ff;
          border-left: 6rpx solid #1872ff;
          transition: all 0.3s;
        }
      }

      .filter-type:last-child {
        padding-bottom: 146rpx;
      }
    }
  }

  .main-right {
    width: calc(100% - 192rpx);
    min-height: 100vh;

    .scroll-right {
      width: 100%;
      height: 100%;
      overflow: auto;

      .filter-content {
        width: 100%;
        padding: 20rpx 28rpx 0;
        box-sizing: border-box;

        ._content-title {
          font-size: 40rpx;
          font-weight: 500;
          line-height: 100rpx;
          color: #1c1c1c;

          ._title-tips {
            font-size: 28rpx;
          }
        }

        ._content-box {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;

          ._box-item {
            width: 240rpx;
            min-height: 68rpx;
            background-color: #f6f6f6;
            border-radius: 8rpx;
            // line-height: 68rpx;
            text-align: center;
            font-size: 28rpx;
            font-weight: 400;
            color: #1c1c1c;
            border: 1px solid #ffffff;
            margin-bottom: 30rpx;
            word-break: break-all;
            padding: 0 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
          }

          ._box-item-on {
            border: 1px solid #1872ff;
            color: #1872ff;
            background-color: #ffffff;
            transition: all 0.3s;
          }
        }
      }

      .filter-content:last-child {
        padding-bottom: 146rpx;
      }
    }
  }
}
</style>
